<script setup>
import {ref,onMounted} from 'vue'
import { useRouter } from "vue-router";
import useUserInfoStore from "@/stores/user"; //引入仓库
import { storeToRefs } from "pinia"; //引入pinia转换
const userInfoStore = useUserInfoStore()
const { username, img ,password} = storeToRefs(userInfoStore); 
const router = useRouter();

const userLogin = ref('')
const passwordLogin= ref('')
function btn(){
    if(userLogin.value==''){
        showToast({
            message: '用户名不能为空',
            position: 'top',
        });
    }
    else{
        userInfoStore.username = userLogin.value
        userInfoStore.password = passwordLogin.value
        sessionStorage.setItem('userlogin', userLogin.value);
        router.push({
            path: "/todolist"
        })
    }
}
function quit(){
    userInfoStore.username = ''
    userInfoStore.password = ''
    document.getElementById("popUp").hidden = false
    document.getElementById("userDataHidden").style.display = "none"
}
onMounted(() => {
    let user = username.value
    if(user!=null && user!=''){
        document.getElementById("popUp").hidden = true
        document.getElementById("userDataHidden").style.display = "block"
    }
})
</script>

<template>
    <div class="userMain">
        <div id="popUp">
            <p class="title">用户登录</p>
            <p><el-input v-model.lazy="userLogin" id="searchTxt" style="width: 70%;height: 40px;" placeholder="账号" /></p>
            <p><el-input v-model.lazy="passwordLogin" id="searchTxt" style="width: 70%;height: 40px;margin-top: 20px;" placeholder="密码" show-password/></p>
            <p><el-button type="warning" class="btn" @click="btn">登录</el-button></p>
        </div>
        <div id="userDataHidden">
            <div class="userData">
                <div class="userHome">
                    <div>
                        <el-avatar :size="size" :src="img" style="margin:33% 0 0 33%;width:100px;height: 100px;"/>
                        <el-row class="w-50px" style="margin: 10px 30% 20px 35%">
                            <el-text truncated>账号：{{ username }}</el-text>
                        </el-row>
                        <el-text class="mx-1" style="margin-left: 35%;margin-right: 30%;" truncated>密码：{{ password }}</el-text>
                        <van-button plain hairline type="primary" @click="quit" style="margin-left: 33%;margin-top: 20px;">退出登录</van-button>
                    </div>
                    <div></div>
                </div>
            </div>
        </div>
        
    </div>
</template>

<style scoped>
#userDataHidden{
    display: none;
}
.userData{
    margin: 100px auto;
    width: 300px;
    height: 70vh;
    border-radius: 10px;
    background-color: #f4f4f4;
}
.userHome img{
    text-align: center;
    width: 30%;
    margin-top: 10vh;
    margin-left: 30%;
    border-radius: 50%;
}
.userHome p{
    margin-top: 10px;
    margin-left: 35%;
}
#searchTxt{
    padding-left: 5%;
    margin-top:20px;
    width: 70%;
    height: 40px;
    font-size: 16px;
    border-radius: 50px;
    border: 1px solid rgba(0, 0, 0, 0.235);
    background-color: white;
}
.btn{
    margin-top:28px;
    width: 75%;
    height: 46px;
    font-size: 16px;
    border-radius: 50px;
    border: 0;
    color: white;
    background: linear-gradient(to right, #ff6f00, #ffa516);
}
#popUp .title{
    color: rgb(89, 89, 89);
    text-align: center;
    padding-top: 5vh;
    margin-bottom: 5vh;
    font-size: 20px;
    font-weight: 600;
}
#popUp{
    text-align: center;
    margin: 100px auto;
    width: 300px;
    height: 60vh;
    border-radius: 10px;
    border: 2px solid rgb(180, 180, 180);
    background-color: white;
}
#popUp p{
    margin-bottom: -3vh;
}
.userMain{
    margin-top:13vh;
    width: 100%;
    height: 85vh;
}
</style>